<template>
  <div class="container">
    <!-- 从学科进入的时候 -->
    <el-form
      ref="tagsAddform"
      :model="addTags"
      label-width="80px"
      :rules="tagsAddrules"
      v-if="this.$route.query.id"
    >
      <el-form-item label="目录名称" prop="muluName">
        <el-input
          v-model="addTags.muluName"
          placeholder="请输入目录名称"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="$emit('close', addTags)">取消</el-button>
        <el-button type="primary" @click="tagsAddokk">确认</el-button>
      </el-form-item>
    </el-form>
    <!-- 从我的标签页进入 -->
    <el-form
      ref="tagsAddform"
      :model="addTags"
      label-width="80px"
      :rules="tagsAddrules"
      v-else
    >
      <el-form-item label="所属学科">
        <el-select v-model="addTags.subject" placeholder="请选择">
          <el-option
            v-for="(item, index) in subjectList"
            :key="index"
            :label="item.subjectName"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="目录名称" prop="muluName">
        <el-input
          v-model="addTags.muluName"
          placeholder="请输入目录名称"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="$emit('close', addTags)">取消</el-button>
        <el-button type="primary" @click="tagsAddokk">确认</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { list } from '@/api/hmmm/subjects.js'
import { add } from '@/api/hmmm/tags'
export default {
  name: 'tags-add',
  data() {
    return {
      addTags: {
        subject: '',
        muluName: ''
      },
      // 保存学科列表的数据
      subjectList: [],
      // 验证规则
      tagsAddrules: {
        muluName: [
          { required: true, message: '请输入活动名称', trigger: 'blur' }
        ]
      }
    }
  },
  props: {
    query: {
      type: Object
    }
  },
  methods: {
    // 获取学科列表数据
    async getsubject() {
      const { data } = await list()
      // console.log(data)
      this.subjectList = data.items
    },
    // 确定添加
    tagsAddokk() {
      this.$refs.tagsAddform.validate(async (valid) => {
        if (valid) {
          this.$message({
            message: '验证通过🆗',
            type: 'success'
          })
        } else {
          this.$message.error('验证失败')
          return false
        }
        // console.log(this.subjectList[5].id)
        // 添加功能
        await add({
          subjectID: this.addTags.subject,
          tagName: this.addTags.muluName
        })
        this.$message({
          message: '添加标签成功',
          type: 'success'
        })
        this.$emit('close', this.addTags)
        // 重新调用标签列表数据
        this.$emit('tagsList')
      })
    }
  },
  created() {
    this.getsubject()
  }
}
</script>

<style scoped lang="less"></style>
